import * as React from "react";
import { CalcConditionParam } from "../Condition";
import { Spin, Table } from "antd";
import { getCalcPageDataUrl } from "../serverApi";
import { getNetWorkData } from "../../../../../../utils/common";
import CalcModal from "../CalcModal";

export interface DataCalcTableProps {
  paramJson: CalcConditionParam;
}

export interface DataCalcTableState {
  initModalAttr: any;
  modalVisible: boolean;
  loading: boolean;
}

class DataCalcTable extends React.Component<
  DataCalcTableProps,
  DataCalcTableState
> {
  private eleColumns: any[] = [
    {
      title: "设备名称",
      dataIndex: "deviceName",
      key: "name",
    },
    {
      title: "设备编号",
      dataIndex: "deviceNo",
      key: "deviceNo",
    },
    {
      title: "设备地址",
      dataIndex: "devAddr",
      key: "devAddr",
    },

    {
      title: "尖",
      children: [
        {
          key: "zyJStart",
          dataIndex: "zyJStart",
          title: "起始表码",
        },
        {
          key: "zyJEnd",
          dataIndex: "zyJEnd",
          title: "结束表码",
        },
        {
          key: "zyJVal",
          dataIndex: "zyJVal",
          title: "用量",
        },
      ],
    },
    {
      title: "峰",
      children: [
        {
          key: "zyFStart",
          dataIndex: "zyFStart",
          title: "起始表码",
        },
        {
          key: "zyFEnd",
          dataIndex: "zyFEnd",
          title: "结束表码",
        },
        {
          key: "zyFVal",
          dataIndex: "zyFVal",
          title: "用量",
        },
      ],
    },
    {
      title: "平",
      children: [
        {
          key: "zyPStart",
          dataIndex: "zyPStart",
          title: "起始表码",
        },
        {
          key: "zyPEnd",
          dataIndex: "zyPEnd",
          title: "结束表码",
        },
        {
          key: "zyPVal",
          dataIndex: "zyPVal",
          title: "用量",
        },
      ],
    },
    {
      title: "谷",
      children: [
        {
          key: "zyGStart",
          dataIndex: "zyGStart",
          title: "起始表码",
        },
        {
          key: "zyGEnd",
          dataIndex: "zyGEnd",
          title: "结束表码",
        },
        {
          key: "zyGVal",
          dataIndex: "zyGVal",
          title: "用量",
        },
      ],
    },
    {
      title: "用量总计",
      dataIndex: "zyTVal",
      color: "red",
      key: "zyTVal",
      render: (text: string, record: any) => {
        return (
          <>
            <div
              style={{ cursor: "pointer", color: "#0EA468" }}
              onClick={() => {
                this.modalLoad(record);
              }}
            >
              {text}
            </div>
          </>
        );
      },
    },
  ];
  private waterColumns: any[] = [
    {
      title: "设备名称",
      dataIndex: "deviceName",
      key: "name",
    },
    {
      title: "设备地址",
      dataIndex: "devAddr",
      key: "devAddr",
    },
    {
      title: "起始表码",
      dataIndex: "startCode",
      key: "startCode",
    },
    {
      title: "结束表码",
      dataIndex: "endCode",
      key: "endCode",
    },
    {
      title: "用量",
      dataIndex: "val",
      key: "val",
      render: (text: string, record: any) => {
        return (
          <>
            <div
              style={{ cursor: "pointer", color: "#0EA468" }}
              onClick={() => {
                this.modalLoad(record);
              }}
            >
              {text}
            </div>
          </>
        );
      },
    },
  ];

  state = { loading: false, modalVisible: false, initModalAttr: null };
  private dataSource: any[] = [];
  private pageIndex: number = 1;
  private pageSize: number = 20;
  private total: number = 0;
  render() {
    return (
      <div>
        <Spin spinning={this.state.loading}>
          <Table
            bordered
            columns={
              this.props.paramJson.energyType === 1 &&
              this.props.paramJson.timeType === 2
                ? this.eleColumns
                : this.waterColumns
            }
            dataSource={this.dataSource}
            pagination={{
              pageSize: this.pageSize,
              total: this.total,
              current: this.pageIndex,
              onChange: (page: number) => {
                this.pageIndex = page;
                this.getPageData(page, this.props.paramJson);
              },
            }}
          ></Table>
        </Spin>
        <CalcModal
          visible={this.state.modalVisible}
          attr={this.state.initModalAttr}
          onOk={() => {}}
          onCancel={(data: any) => {
            // console.log(data);
            this.setState({ modalVisible: data });
          }}
        ></CalcModal>
      </div>
    );
  }
  modalLoad(data: any) {
    let { paramJson } = this.props;
    let attr = {
      deviceId: data.deviceId,
      start: paramJson.startTime,
      end: paramJson.endTime,
      timeType: paramJson.timeType,
      energyType: paramJson.energyType,
    };
    this.setState({ initModalAttr: attr, modalVisible: true });
  }
  //钩子函数，props被改变时被触发
  componentWillReceiveProps(nextProps) {
    this.pageIndex = 1;
    this.getPageData(this.pageIndex, nextProps.paramJson);
    return true;
  }
  //分页查询
  getPageData(page, paramJson) {
    if (paramJson.startTime === 0 || paramJson.endTime === 0) {
      return;
    }
    this.dataSource = [];
    this.forceUpdate();
    let param = {
      pageIndex: page,
      pageSize: this.pageSize,
      queryData: paramJson,
    };
    this.setState({ loading: true });
    getNetWorkData(
      getCalcPageDataUrl,
      param,
      this,
      (result) => {
        this.setState({ loading: false });
        if (result.success) {
          this.dataSource = result.data.records;
          this.total = result.data.total;
          this.forceUpdate();
        }
      },
      (err) => {
        this.setState({ loading: false });
      }
    );
  }
}
export default DataCalcTable;
